<template>
  <div class="classdetail-table">
    <el-collapse v-model="activeName" accordion @change="handleChange">
      <ul class="detail-learn-subject">
        <template v-for="(item,index) in courseList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <li :key="index" class="detail-learn-subject-list">
            <el-row :gutter="20">
              <el-col :span="5">
                <img :src="item.largePicture" alt style="width:100%;height:100%;">
              </el-col>
              <el-col :span="13">
                <span class="content-title">{{ item.title }}</span>
                <p style="color:#c6c6c7">{{ item.subtitle }}</p>
                <span
                  :style="item.type=== '录播'? recordWay: onWay"
                  class="content-way"
                >{{ item.type }}</span>
              </el-col>
              <el-col :span="6">
                <div class="right-wrap">
                  <!--<div class="class-rank">-->
                    <!--<i class="el-icon-rank"/>-->
                  <!--</div>-->
                  <div class="class-detail">讲师:{{ item.userName }} | 课时: {{ item.lessonNum }}</div>
                  <div class="class-manage">
                    <!--<el-checkbox v-model="item.checked">前台显示此课程</el-checkbox>-->
                    <el-button type="danger" style="margin-left:20px;" @click="deleteCLick(item.id)">移除课程</el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </li>
        </template>
      </ul>
      <!--</el-collapse-item>-->
      <!--</template>-->
    </el-collapse>
    <el-pagination
      :total="courseList.length"
      :current-page="currentPage"
      :page-size="pageSize"
      background
      layout="total, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteId)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
  </div>
</template>

<script>
  import {classRoomCourseList} from '@/api/user/user'
  import {deleteCourse} from '@/api/subject/classroom';
  import {getTenantId} from '@/utils/auth'

  export default {
    props: {
      statusId: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        activeName: '1',
        recordWay: {backgroundColor: '#f89e29'},
        onWay: {backgroundColor: '#4297ff'},
        courseList: [],
        handleDelete: false,//删除
        deleteId: '',
        deleteCLick(id) {
          this.handleDelete = true;
          this.deleteId = id;
        },
        currentPage: 1,
        pageSize: 5
      }
    },
    computed: {
      number() {
        return this.courseList.length
      }
    },
    created() {
      this.getCourseList()
    },
    methods: {
      handleChange(val) {
        console.log(val)
      },
      getCourseList() {
        classRoomCourseList(this.statusId).then(response => {
          this.courseList = response.data.items
          this.courseList.map(item => {
            if (item.type === 'normal') item.type = '录播';
            if (item.type === 'live') item.type = '直播';
            if (item.type === 'open') item.type = '公开课';
          })
        }).catch(() => {
        })
      },
      deleteData(id) {
        this.handleDelete = false;
        deleteCourse(id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getCourseList();
        })
      },
      handleSizeChange(val) {
      this.pageSize = val
      },
      handleCurrentChange(val) {
      this.currentPage = val
      }
    }
  }
</script>

<style lang="scss">
  .classdetail-table {
    margin-top: 30px;

    .el-collapse {
      .el-collapse-item__header.is-active {
        background-color: #e4fafd;
      }

      .el-collapse-item__header {
        background-color: #f0f3ff;

        .left-content {
          display: block;
          height: 48px;
          line-height: 48px;
          float: left;
          padding-left: 15px;

          .el-icon-rank {
            font-size: 18px;
            margin-right: 20px;
          }

          .title {
            margin-right: 20px;
            font-size: 18px;
            color: #585858;
          }
        }

        .right-button {
          display: block;
          height: 48px;
          line-height: 48px;
          position: absolute;
          right: 20px;
          margin-right: 10px;
        }
      }

      .subtitle {
        width: 100%;
        height: 72px;
        line-height: 72px;
        font-size: 16px;
        color: #585858;

        .tip {
          padding: 5px 10px;
          background: #00b4d4;
          font-size: 16px;
          color: #fff;
          border-radius: 5px;
        }
      }

      .detail-learn-subject {
        padding: 0 25px;
        margin: 0;
        width: 100%;
        list-style: none;

        &-list {
          height: 180px;
          padding: 14px 14px 28px 14px;
          border: 1px solid #dcdfe6;
          border-radius: 3px;
          margin-bottom: 20px;

          .el-col {
            height: 150px;
            position: relative;

            span.content-way {
              position: absolute;
              bottom: 10px;
              color: #fff;
              font-size: 18px;
              padding: 5px 25px;
            }

            .right-wrap {
              width: 100%;
              height: 100%;
              position: relative;

              .class-rank {
                font-size: 20px;
                position: absolute;
                right: 0;
                cursor: pointer;
              }

              .class-detail {
                font-size: 18px;
                position: absolute;
                right: 0;
                top: 35%;
                color: #3d3d3d;
              }

              .class-manage {
                position: absolute;
                right: 0;
                bottom: 10px;

                .el-checkbox__label {
                  color: #3d3d3d;
                  font-size: 18px;
                }
                @media screen and (max-width: 1600px) {
                  /deep/.el-checkbox {
                    margin-right: 0;
                  }
                  .el-checkbox__label {
                      font-size: 16px
                  }
                  /deep/.el-button--medium {
                    padding: 7px 7px;
                  }
                }
              }
            }
          }

          .content-title {
            margin: 0;
            margin-top: 10px;
            margin-bottom: 5px;
            color: #3d3d3d;
            font-size: 18px;
            font-weight: 600;
          }

          p {
            margin: 0;
            font-size: 16px;
            color: #8a8b8c;
          }
        }
      }
    }
  }
</style>
